import React from 'react';
import PropTypes from 'prop-types';

class AddColorForm extends React.Component {
    constructor(props) {
        super(props);
        this.submit = this.submit.bind(this);
    }
    submit(e) {
        const { _title, _color } = this.refs;
        e.preventDefault();
        this.props.onNewColor(_title.value, _color.value);
        _title.value = '';
        _color.value = '#000000';
        _title.focus();
    }
    render() {
        return (
            <div id="contain">
                <form action="" onSubmit={this.submit}>
                    <input type="text" ref="_title" placeholder="color title..." required />
                    <input type="color" ref="_color" required />
                    <button>ADD</button>
                </form>
            </div>
        )
    }
};


AddColorForm.propTypes = {
    onNewColor: PropTypes.func
};

AddColorForm.propTypes = {
    onNewColor: f => null
};
export default AddColorForm;